<template>
  <div class="rechargeView">
    <!-- 头部 -->
    <header class="header">
      <div class="left" @click="$router.back()"></div>
      <div class="title">充值</div>
    </header>
    <!-- 头部 -->

    <!-- 充值列表 -->
    <div class="list">
      <div class="title">
        <div class="left">请选择金额</div>
        <div class="right">1元 = 10书豆</div>
      </div>
      <div class="item" v-for="(vl, i) in list" :key="i">
        <div class="left">
          <div class="title">{{ vl.num }}书豆</div>
          <div class="tips" v-show="vl.isDiscount">
            <span>送</span>{{ vl.Discount }}%
          </div>
        </div>
        <div class="right">
          <div class="num">￥{{ vl.price }}</div>
          <div class="btn" @click="recharge(vl.num, vl.price)">充值</div>
        </div>
      </div>
    </div>

    <!-- 温馨提示 -->
    <div class="tips">
      <div class="title">温馨提示</div>
      <div class="item">
        <span>1.</span>
        <p>
          充值过程可能会有延迟到账的情况，如果长时间未到账，请从“我的”“意见反馈”里进行反馈，客服人员会进行处理。
        </p>
      </div>
      <div class="item">
        <span>2.</span>
        <p>本页面显示的赠送豆券，为相应充值方式的最高金额赠送数量。</p>
      </div>
      <div class="agree">
        <div :class="['btn', { con: agree }]" @click="agree = !agree"></div>
        <span>请阅读并同意</span>
        <a href="https://t.shuqi.com/user-agreement">《用户协议》</a>
        <a href="https://t.shuqi.com/privacy-policy">《隐私协议》</a>
      </div>
    </div>

    <van-popup
      v-model="popup"
      class="popup"
      :overlay-style="{ 'background-color': 'rgba(0,0,0,.1)' }"
      :style="{ height: '23%', width: '70%' }"
    >
      <div class="question">是否支付{{ price }}元充值{{ num }}书豆？</div>
      <div class="bottom">
        <div class="no" @click="popup = false">否</div>
        <div class="yes" @click="recharged">是</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          num: 10,
          price: 1,
          isDiscount: false,
          Discount: 2,
        },
        {
          num: 60,
          price: 6,
          isDiscount: false,
          Discount: 2,
        },
        {
          num: 100,
          price: 10,
          isDiscount: false,
          Discount: 2,
        },
        {
          num: 120,
          price: 12,
          isDiscount: false,
          Discount: 2,
        },
        {
          num: 300,
          price: 30,
          isDiscount: false,
          Discount: 2,
        },
        {
          num: 2000,
          price: 200,
          isDiscount: false,
          Discount: 2,
        },
        {
          num: 500,
          price: 50,
          isDiscount: true,
          Discount: 2,
        },
        {
          num: 1000,
          price: 100,
          isDiscount: true,
          Discount: 5,
        },
      ],
      agree: false,
      popup: false,
      price: 0,
      num: 0,
    };
  },
  methods: {
    // 获取用户数据
    getUserDataFun() {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      console.log(this.userInfo);
    },
    // 弹出充值确认框
    recharge(num, price) {
      if (this.agree) {
        this.num = num;
        this.price = price;
        this.popup = true;
      } else {
        this.$toast({
          message: "请勾选协议",
          position: "bottom",
        });
      }
    },
    // 确认充值
    recharged() {
      this.popup = false;
      this.$toast({
          message: "充值成功",
          position: "bottom",
        });
      let userId = localStorage.getItem("userId");
      this.userInfo[userId].balance += this.num;
      localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
      this.$router.back()
    },
  },
  created() {
    this.getUserDataFun();
  },
};
</script>

<style lang="scss" scoped>
.rechargeView {
  padding: 10px 16px 50px;

  header.header {
    height: 50px;
    text-align: center;
    position: relative;

    > .left {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 10px;
      margin: auto;
      transform: rotate(180deg);
      background: url(https://easyreadfs.nosdn.127.net/web/trunk/1533607652166/icon_return.png)
        no-repeat;
      background-size: contain;
      width: 12px;
      height: 20px;
    }

    > .title {
      color: #333;
      font-weight: bold;
      line-height: 50px;
      font-size: 18px;
    }
  }

  > .list {
    font-size: 18px;
    line-height: 18px;

    > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    > .title {
      height: 42px;
      > .right {
        font-size: 14px;
        line-height: 14px;
        color: #999;
      }
    }

    > .item {
      height: 52px;
      font-size: 16px;
      line-height: 16px;
      position: relative;

      > div {
        display: flex;
        align-items: center;

        > .tips {
          display: flex;
          margin-left: 12px;
          color: #cca985;
          font-size: 14px;

          > span {
            display: inline-block;
            width: 17px;
            height: 17px;
            font-size: 10px;
            background: #cca985;
            text-align: center;
            border-radius: 3px;
            margin-right: 5px;
            color: #fff;
          }
        }

        > .btn {
          padding: 0 12px;
          height: 27px;
          line-height: 27px;
          font-size: 12px;
          background: #cca985;
          margin-left: 8px;
          border-radius: 3px;
          color: #fff;
        }
      }

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #e5e5e5;
        transform: scaleY(0.5);
      }
    }
  }

  > .tips {
    margin-top: 30px;

    > .title {
      font-size: 18px;
      line-height: 24px;
      margin-bottom: 16px;
    }

    > .item {
      display: flex;
      font-size: 13px;
      color: #999;
      margin-bottom: 10px;
      line-height: 18px;
    }

    > .agree {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 35px;
      font-size: 13px;
      color: #999;

      > .btn {
        width: 12px;
        height: 12px;
        background-image: url(https://img-tailor.11222.cn/cms/upload/img/162313240862327fbfa276100dba6aea495bd872cb679.png);
        background-size: 100%;
        margin-right: 6px;

        &.con {
          background-image: url(https://img-tailor.11222.cn/cms/upload/img/162312630015727fbfa276100dba6aea495bd872cb679.png);
        }
      }

      > a {
        color: #cca985;
      }
    }
  }

  .popup {
    > .question {
      height: 70%;
      border-bottom: 1px solid #f0f0f0;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }

    > .bottom {
      display: flex;
      height: 29%;

      >.yes{
        font-weight: bold;
        color: #23b383;
      }

      > div {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        &:nth-of-type(1) {
          border-right: 1px solid #f0f0f0;
        }
      }
    }
  }
}
</style>